<script setup>
import * as echarts from 'echarts';
import { onMounted, reactive, ref, onBeforeUnmount, nextTick, inject, watch } from 'vue';
// import geoJSON from '@/assets/json/China_Province/330000.json';
import { eventBus } from '@/function/bus/index.js';
import map_bg from './map_bg.png'

defineOptions({name: 'echarts'});
let geoJSON = null;
const mapParams = inject('mapParams');
// 深度监听
watch(() => [mapParams], () => {
  loadGoJson();
}, {deep: true})
onMounted(() => {
  loadGoJson();
});
async function loadGoJson() {
  loading.value = true;
  geoJSON = mapParams.geoJSON;
  loadEchartsMap()
}

const loading = ref(false);

// 地图实例
const myChart = ref(null);
// 地图配置
const option = reactive({
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      return params.name + '：' + (params.value || 0);
    },
  },
  series: [
    // 地图配置
    {
      type: "map",
      geoIndex: 0,
      data: [],
    },
  ],
  geo: [{
    map: "map_area",
    layoutCenter: ['50%', '50%'],
    layoutSize: '92%',
    z: 2,
    label: {
      show: true,
      fontSize: 13,
      // formatter: ['{a|}{b}'].join('\n'),
      color: '#1bfeff',
      // rich: {
      //   a: {
      //     backgroundColor: {
      //       image: point,
      //       repeat:'no-repeat'
      //     },
      //     height: 30,
      //     align: 'left',
      //   },
      // }
    },
    itemStyle: { // 地图区域的多边形 图形样式。
      borderColor: '#5ec8f3', // 图形的描边颜色
      borderWidth: 1.8,
      borderType: 'dotted', // 描边类型
      // color: "#010e3b", // 图形颜色
      opacity: .7,
      areaColor: {
        image: map_bg, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
        repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
      },
    },
    emphasis: { // 高亮状态下的多边形和标签样式。
      label: {
        show: true,
        color: "#1bfeff",
      },
      itemStyle: {
        borderType: 'solid',
        borderColor: '#5ec8f3',
        areaColor: {
          image: map_bg, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
          repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
        },
      }
    },
    select: { // 选中状态下的多边形和标签样式。
      label: {
        show: true,
        color: "#1bfeff",
      },
      itemStyle: {
        borderType: 'solid',
        borderColor: '#5ec8f3',
        areaColor: {
          image: map_bg, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
          repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
        },
      }
    },
  }, {
    map: "map_area",
    layoutCenter: ['50%', '50%'],
    layoutSize: '92%',
    z: 1,
    tooltip: {
      show: false
    },
    label: {
      show: false
    },
    itemStyle: {
      shadowColor: '#3165bb', // 阴影颜色
      shadowOffsetX: 5, // 阴影水平偏移距离
      shadowOffsetY: 8, // 阴影垂直偏移距离
      // shadowBlur: 2, // 图形阴影的模糊大小
      // borderColor: '#5ec8f3', // 图形的描边颜色
      // borderWidth: 1.8, // 描边线宽
      // borderType: 'dotted', // 描边类型
      color: '#15294d',
      opacity: .8,
      // areaColor: {
      //   image: map_bg, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
      //   repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
      // },
    },
    emphasis: {
      disabled: true,
    },
    select: {
      disabled: true,
    }
  }]
})
// 加载Echarts地图
const loadEchartsMap = () => {
  disposeEchartsMap();
  setTimeout(() => {
    // 初始化
    myChart.value = echarts.init(document.getElementById('mainMap'));
    // 监听窗口大小变化
    window.addEventListener("resize", () => {
      if (myChart.value) myChart.value.resize();
    })
    // 点击事件
    myChart.value.on('click', (mapParams) => {
      eventBus.emit('areaChange', mapParams);
    });
    // 鼠标移入事件
    myChart.value.on('mouseover', (mapParams) => {
      // console.log('mouseover', mapParams);
    });
    // 鼠标移出事件
    myChart.value.on('mouseout', (mapParams) => {
      // console.log('mouseout', mapParams);
    });
    option.series[0].data = (geoJSON?.features || []).map((item) => {
      return {
        name: item.properties.name,
        value: item.properties.value,
        code: item.properties.adcode,
        parent: item.properties.parent,
      }
    })
    // 加载地图
    echarts.registerMap("map_area", geoJSON);
    myChart.value.setOption(option);
    loading.value = false;
  }, 500)
}
// 销毁地图
const disposeEchartsMap = () => {
  window.removeEventListener("resize", () => {
    if (myChart.value) myChart.value.resize();
  })
  if (myChart.value) myChart.value.dispose();
}

// 销毁
onBeforeUnmount(() => {
  disposeEchartsMap();
})

// 子组件暴露
defineExpose({});

</script>

<template>
  <div id="mainMap" style="width: 100%;height: 100%;" v-loading="loading"></div>
</template>

<style lang="less" scoped>

</style>
